<template>
  <BaseDialog v-model="dialogVisible" :title="$t('public.detail')" width="850px" :before-close="handleClose">
    <el-descriptions :column="2" border :label-width="200">
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.supplierName') }}</template>
        {{ formData.name || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.status') }}</template>
        <span v-if="row.status === 1">{{ g_t('supplier.normal') }}</span>
        <span v-else-if="row.status === 2">{{ g_t('supplier.locked') }}</span>
        <span v-else>--</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.category') }}</template>
        <span>{{ g_options.costItemTypeOptions.find(item => item.value == formData.type)?.label || '--'
          }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.code') }}</template>
        {{
        formData.code|| '--'
        }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.costNum') }}</template>
        {{ formData.costNum }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.auditStatus') }}</template>
        <span v-if="row.auditStatus === 1">{{ g_t('supplier.pendingReview') }}</span>
        <span v-else-if="row.auditStatus === 2">{{ g_t('supplier.reviewed') }}</span>
        <span v-else-if="row.auditStatus === 3">{{ g_t('supplier.rejected') }}</span>
        <span v-else>--</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.province') }}</template>
        {{ formData.province || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.city') }}</template>
        {{ formData.city || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.leader') }}</template>
        {{ formData.leader || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.mobile') }}</template>
        {{ formData.mobile || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.createName') }}</template>
        {{ formData.createName || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.createTime') }}</template>
        {{ formData.createTime || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>{{ $t('supplier.remark') }}</template>
        {{ formData.remark || '--' }}
      </el-descriptions-item>
    </el-descriptions>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  row: {
    type: Object,
    default: {}
  }
})

const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const formData = ref({})

onMounted(() => {
  formData.value = props.row
})

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss"></style>
